<!-- 简历区域 -->
<!-- 两种布局：1.分为左右两部分的简历 2.一个大部分的简历 -->
<template>
  <div ref="customContentRef" class="resume-view">
    <template
      v-if="userResumeStore.resumeJsonNewStore.LAYOUT === 'custom'"
    ></template>
    <!-- 1.直接为一个大部分简历 -->
    <template
      v-else-if="userResumeStore.resumeJsonNewStore.LAYOUT === 'classical'"
    >
      <draggable
        v-model="userResumeStore.resumeJsonNewStore.COMPONENTS"
        group="people"
        @start="drag = true"
        @end="drag = false"
        item-key="id"
      >
        <template #item="{ element }">
          <div class="scrollbar-demo-item">
            <ModelBox
              :item="element"
              :components="MaterialComponents"
              :modelData="element.data"
            ></ModelBox>
          </div>
        </template>
      </draggable>
    </template>
    <!-- 2.分为左右部分的简历 -->
    <template
      v-else-if="userResumeStore.resumeJsonNewStore.LAYOUT === 'leftRight'"
    >
      <div class="container">
        <div
          class="left-box"
          ref="leftBox"
          :style="{ height: `${1160 * linesNumber}px` }"
        >
          <draggable
            class="left-drag-area"
            :list="leftList"
            item-key="id"
            animation="500"
            group="custom"
            :sort="true"
          >
            <template #item="{ element }">
              <div class="list-group-item">
                <ModelBox
                  :item="element"
                  :components="MaterialComponents"
                  :modelData="element.data"
                ></ModelBox>
              </div>
            </template>
          </draggable>
        </div>
        <div class="right-box">
          <draggable
            class="right-drag-area"
            :list="rightList"
            item-key="id"
            animation="500"
            group="custom"
            :sort="true"
          >
            <template #item="{ element }">
              <div class="list-group-item">
                <ModelBox
                  :item="element"
                  :components="MaterialComponents"
                  :modelData="element.data"
                ></ModelBox>
              </div>
            </template>
          </draggable>
        </div>
      </div>
    </template>
    <!-- 分页分割线 -->
    <template v-if="linesNumber > 0">
      <!-- 根据index，动态设置分割线距离顶部高度 -->
      <div
        v-for="(item, index) in linesNumber"
        ref="linesItem"
        :style="{ top: `${1200 + 1132 * index}px` }"
        :key="index"
        class="lines"
      >
        <p class="tips">
          如果分割线遮挡内容，请通过调整模块上下边距以显示内容！
        </p>
        <p class="page">{{ index + 1 }}/{{ linesNumber }}</p>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, nextTick, reactive } from 'vue'
import draggable from 'vuedraggable'
import ModelBox from './modelBox.vue'
// import ModelTitle from '@/material/ModelTitle/ModelTitle1.vue'
import MaterialComponents from '@/util/registerMaterial'
import { useResumeJsonStore } from '@/store/resume'
defineOptions({ name: 'custom' })
let $emit = defineEmits(['changeHeight'])
// $emit('changeHeight','1111')
let userResumeStore = useResumeJsonStore()
const leftList = ref<any>([])
const rightList = ref<any>([])

watch(
  userResumeStore.resumeJsonNewStore.COMPONENTS,
  () => {
    if (userResumeStore.resumeJsonNewStore.LAYOUT === 'leftRight') {
      leftList.value = userResumeStore.resumeJsonNewStore.COMPONENTS.filter(
        (item) => item.layout === 'left',
      ) //左侧列表
      rightList.value = userResumeStore.resumeJsonNewStore.COMPONENTS.filter(
        (item) => item.layout === 'right',
      ) //右侧列表
    }
  },
  { deep: true, immediate: true },
)
//监听简历页面高度
const customContentRef = ref(null)
const linesNumber = ref(0)
defineExpose({ linesNumber })
const leftBox = ref(null)

//获得循环生成动态的分隔线的dom节点（是一个数组）
const linesItem = ref(null)
const resumeChangeHeight = function () {
  const myObserve = new ResizeObserver((entires) => {
    //emtires是一个数组包含 entry.target指触发对象的DOM节点本身 和  entry.contentBox
    for (let entry of entires) {
      //简历的高度 1160px是简历样式设置的min-height
      let height = (entry.target as HTMLElement).offsetHeight
      linesNumber.value = Math.ceil(height / 1160)
    }
  })
  //开启监听
  try {
    myObserve.observe(customContentRef.value as unknown as HTMLDivElement)  
  } catch (error) {
    console.log(error)
  }
}
//在组件挂载完毕监听高度
onMounted(() => {
  resumeChangeHeight()
})
</script>
<style lang="scss" scoped>
.resume-view {
  position: relative;

  .left-box {
    width: v-bind('userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.leftWidth');
    box-sizing: border-box;
    background-color: v-bind(
      'userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.leftThemeColor'
    );
    min-height: 1160px;
    position: absolute;
    height: 100%;

    .left-drag-area {
      min-height: 1160px;
      width: 100%;
    }
  }

  .right-box {
    min-height: 1160px;
    width: v-bind('userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.rightWidth');
    margin-left: v-bind(
      'userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.leftWidth'
    );
    background-color: v-bind(
      'userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.rightThemeColor'
    );

    .right-drag-area {
      min-height: 1160px;
      width: 100%;
    }
  }

  .lines {
    z-index: 10;
    width: 820px;
    height: 24px;
    display: flex;
    align-items: center;
    position: absolute;
    background: #f3f3f3 url(@/assets/images/paging_bg.png) center top no-repeat;
    //元素及其子元素文本无法被选中
    user-select: none;
    //元素不会成为鼠标事件的target
    pointer-events: none;

    .tips {
      font-size: 9px;
      color: #c7c7c7;
    }

    .page {
      font-size: 9px;
      color: #999999;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
